<!-- 投屏测试页面 -->
<template>
  <view class="container">
    <!-- 视频播放器 -->
    <video :src="videoUrl" :title="videoTitle" controls="true" autoplay="true"
      style="width: 100%; height: 400rpx; margin-bottom: 30rpx;">
    </video>

    <!-- 状态信息 -->
    <view class="info-panel">
      <view class="info-title">تىلىۋۇزۇرغا ئۇلاش ئۇسۇلى</view>
      <view class="info-item" v-for="item in castContent">
        <view class="info-titles">{{ item.title }}</view>
        <view class="info-text">{{ item.text }}</view>
        <view v-show="item.img.length > 0" v-for="img in item.img" style="width: 100%; border-radius: 20rpx; overflow: hidden;">
          <image class="info-imgs" :src="img.url"></image>

        </view>
      </view>

    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {
  onLoad,
} from '@dcloudio/uni-app';

// 获取演员信息
onLoad((options) => {

  console.log("获取的信息：", options);
  videoUrl.value = options.videoUrl;
  videoTitle.value = options.videoTitle;

})

// 'https://app.erkantv.cn/%E4%B8%AD%E6%96%87/tv/%E7%96%91%E7%8A%AF%E8%BF%BD%E8%B8%AA%20%E7%AC%AC%E5%9B%9B%E5%AD%A3/S04E10.mp4'
const videoUrl = ref('')
const videoTitle = ref('测试视频')
const castContent = ref([
  { title: '1.ئىشلىتىش تەپسىلىي چۈشەندۈرىشى', img: [], text: 'ئۇندىدار ئەپچاق باشقۇرۇش قائىدىسىنىڭ چەكلىمىسى بولغانچە ئاندورىيىد تىلىفۇنلاردا بىۋاستە تىلىۋۇزۇرغا ئۇلاشقا بولمايدۇ ،شۇڭلاشقا نۆۋەتتە بىز ئۈچىنجى تەرەپ ئارقىلىق تىلىۋۇزۇرغا ئۇلاش ئۇسۇلىنى چۈشەندۈرۈپ ئۆتىمىز .' },
  { title: '2.ئۈچىنجى تەرەپ ئەپ دىتالىنى چۈشۈرۈش ئۇسۇلى ', img: [{ url: '/static/cast/1.jpg' }], text: 'تېلېفونىڭىزنىڭ ئەپ بازىرىدىنQQ浏览器دەپ ئىزدەپ چۈشۈرۋالىمىز' },
  { title: '3.ئەمەلىي ئۇلاش ئۇسۇلى', img: [{ url: '/static/cast/2.jpg' }, { url: '/static/cast/3.jpg' }, { url: '/static/cast/4.jpg' }, { url: '/static/cast/5.jpg' }, { url: '/static/cast/6.jpg' }, { url: '/static/cast/7.jpg' }], text: 'ئالدى بىلەن كۆرمەكچى بولغان فىلىمنى قويىمىز. ئاندىن قويغۇچ ئاستى تەرەپتىكى تېلېۋىزور دېگەن كۇنۇپكىنى باسىمىز. باسقاندىن كېيىن يېڭى بەت ئۇلانمىسى ئېچىلىدۇ ، ئېچىلغاندىن كېيىن ئوڭ تەرەپ ئۈستى ئۈچ تال چېكىت نى باسىمىز. ئاندىن  چىققان كۆرسەتمە بويىچە ، بىز باياتىن چۈشۈرۈۋالغان ئەپنىڭ رەسىمىنى ئىزدەپ تاپىمىز. تاپقاندىن كېيىن شۇ ئەپچىنى باسساق ، نۆۋەتتىكى فىلىم يېڭى ئۇلانمىدا ئېچىلىدۇ.  ئېچىلغاندىن كېيىن شۇ ئىچىلغان بەتنىڭ، ئۈستى تەرىپىدىكى TV دېگەن خەتنى باسساق ئەتراپىمىزدىكى ئۇلاشقا بولىدىغان ئۈسكىنىلەرنى ئىزدەيدۇ، شۇ ئۈسكۈنىلەردىن ئۇلىماقچى بولغان ئۈسكىنە ئىسمىنى باسساقلا تىلىۋۇزۇرغا ئۇلىنىدۇ .  ئەگەردە مەشغۇلات تەرتىپىنى بىلەلمىگەن بولسىڭىز ، ئاستى تەرەپتىكى رەسىملىك ئۇلانمىسىغا قاراڭ ياكى مۇلازىمەتچى بىلەن ئالاقىلىشىڭ ' },
  { title: '4.ئەسكەرتىش', img: [{ url: '/static/cast/8.jpg' }], text: 'ئەسكەرتىش تېلېفون بىلەن تېلېۋىزور چۇقۇم بىر ئورتاق  سىمسىز تورغا ئۇلانغان بولۇشى كېرەك ، ئەگەردە ئىزدەش رايونىدىن سىز ئۇلايدىغان تېلېۋىزورنى تاپالمىغان بولسىڭىز،  بۇ تېلېۋىزوردىكى ئۇچۇرنى سىرتقا تارقىتىدىغان ئىقتىدارىنىڭ يوقلىقىدىن دىرەك بېرىدۇ. بۇ خىل ئەھۋالدا ، تېلېۋىزورنىڭ ئەپ بازىرىدىن بىز ئۈچىنچى تەرەپ  ئۇچۇر تارقىتىش ئەپ دىتالىنى چۈشۈرىمىز،   چۈشۈرۈش ئۇسۇلى بولسا تېلېۋىزور ئەپ بازىرىدىن بىز 乐播投屏  بۈگۈن مۇشۇ ئەپنى چۈشۈرۈۋالىمىز،   چۈشۈرۈۋالغاندىن كېيىن تىزىملىتىپ كىرىپ ، ئاندىن تېلېفونىمىزنى ئىزدىسەك مۇشۇ تېلېۋىزورنى ئىزدەپ تاپالايدۇ. ئاندىن شۇ تىزىملىك ئىسمى بويىچە باسساقلا ئاپتوماتىك ئۇلىنىدۇ،   يەنە مەشغۇلات مەغلۇپ بولسا مۇلازىمەتچى بىلەن ئالاقىلىشىڭ' },
]);

</script>

<style scoped>
.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}

.info-panel {
  direction: rtl;
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #1d1d1d;
  width: 90%;
  text-align: start;
}

.info-title {
  font-size: 35rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20rpx;
  text-align: center;
}

.info-item {
  text-align: start;
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: start;

}

.info-titles {

  font-size: 32rpx;
  font-weight: bold;
  padding: 10rpx;
}

.info-imgs {
  width: 100%;
  min-height: 300rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 15rpx 0;

}

.info-item:last-child {
  margin-bottom: 0;
}
</style>